<template>
  <div style=" border-width: 0px;position: absolute;left: 250px;top: 100px;width: 1150px;height: 100px;padding: 20px;margin-bottom: 20px;">
    <el-header >
      <h2>资源管理</h2>
    </el-header>
    <div style="font-size: 16px;color: #999999;display: flex;">

    <el-select v-model="pid_list.value" placeholder="请选择父级资源名称" style="width: 220px;margin-right: 20px;">
      <el-option label="请选择" value="" @click="get_pid('')"></el-option>
      <el-option  v-for= "(item,key) in pid_list" :label="item.name" :value="item.id" @click="get_pid(item.id)"/>
      </el-select>
    <el-input v-model="rerource_name" placeholder="请输入资源名称" style="width: 200px;height: 32px;font-size: 14px;margin-right: 20px;" />
    <el-button type="success"  @click="rerource_search">搜索</el-button>
      <el-button type="primary" @click="add">添加</el-button>
    <el-button type="danger"  @click="del_resource()">批量删除</el-button>
    </div>
      


  </div>
  <el-table :data="recourselist" style="margin-top: 140px;width: 100%;" @selection-change="handleSelectionChange">
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column prop="name" label="资源名称"  />
    <el-table-column prop="url" label="路由" />
    <el-table-column prop="pname" label="父级资源"  />
    <el-table-column fixed="right" label="操作" >
      <template #default="scope">
        <el-button  type="primary"  @click="handleClick(scope.row)">编辑</el-button>
        <el-button  type="danger" @click="deleteres(scope.row)" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog
    v-model="flag"
    width="500"
  >
    <span style="font-size: 18px;">删除确认</span>
    <div style="margin-top: 20px;">信息删除后无法恢复，确定要删除吗？</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="flag = false">取消</el-button>
        <el-button type="success" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <el-pagination
      :current-page="query.page"
      :page-size="query.pagesize"
      :page-sizes="[4,5,6,7]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  <!--  添加按钮和编辑按钮-->


  <!-- <el-table :data="resources" style="width: 100%">
    <el-table-column prop="name" label="名称"/>
    <el-table-column prop="url" label="URL"/>
    <el-table-column prop="pname" label="父级ID"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="edit(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table> -->
<!-- 添加 -->
  <el-dialog v-model="open" width="500">
    <el-input v-model="form.name" placeholder="请输入权限设置名称"/>
    <el-input v-model="form.url" placeholder="请输入url例如：/home"/>
    <el-select v-model="form.pid" placeholder="请选择权限">
      <el-option
          v-for="item in options" :key="item.id" :label="item.name" :value="item.id"
      >
      </el-option>
    </el-select>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="open = false">取消</el-button>
        <el-button type="primary" @click="submit1">提交</el-button>
      </div>
    </template>
  </el-dialog>
<!-- 编辑 -->
<el-dialog v-model="flag_edit" width="500">
    <el-input v-model="obj.name" placeholder="请输入权限设置名称"/>
    <el-input v-model="obj.url" placeholder="请输入url例如：/home"/>
    <el-select v-model="obj.pid" placeholder="请选择权限">
      <el-option
          v-for="item in options" :key="item.id" :label="item.name" :value="item.id"
      >
      </el-option>
    </el-select>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="flag_edit = false">取消</el-button>
        <el-button type="primary" @click="submit_update">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from 'vue';
import {ElMenu, ElMenuItem, ElSubMenu,ElMessage} from 'element-plus';
import axios from "axios";
import http from "../../http";  
// 资源name搜索
let rerource_name = ref('')
const rerource_search=()=>{
  http.get(`/app/resource/?name=${rerource_name.value}`)
  .then(res=>{
    console.log(res.data)
    recourselist.value = res.data.results
    total.value = res.data.count
  })
}

// pid父级资源
let pid_list = ref([])
const get_pid_list = () => {
  http.get(`/app/resource/get_pid_null/`)
  .then(res => {
    // console.log(res.data)
    pid_list.value = res.data.data
  })
}
const get_pid = (id) => {
  // console.log(id)
  http.get(`/app/resource/?pid=${id}`)
  .then(res => {
    // console.log(res.data)
    recourselist.value = res.data.results
    total.value = res.data.count
  })
}
onMounted(() => {
  get_pid_list()
})

// 批量删除
let mul= ref([])
const one=(val)=>{
  mul.value.push(val)
  // console.log(mul)
}
const selectable =(row)=>![1,2,3,4].includes(row.pid)
const handleSelectionChange = (val) => {
  if (val){
    mul.value = val
  }
  else{
    mul.value = []
  }
  console.log(mul.value)
}
const del_resource = () => {
  if (!mul.value || mul.value.length === 0) {
    ElMessage.warning('请选择'); // 提示用户选择
    return; // 终止函数执行
   }
  for (let i = 0; i < mul.value.length; i++) {
    console.log(mul.value[i].id)
    http.delete(`/app/resource/${mul.value[i].id}`)
    .then(res => {
      total.value = res.data.count
      getrescourse()
    })
  }
  ElMessage.success('删除成功')

}
// 分页
let total=ref(0)
let recourselist=ref([])
let query=ref({
  page:1,
  pagesize:6
})
const getrescourse=()=>{
  http.get(`/app/resource/?page=${query.value.page}&size=${query.value.pagesize}`)
  .then(res=>{
    // console.log(res)
    recourselist.value = res.data.results.filter(item=>item.pid != null)
    // console.log(recourselist.value)
    total.value = res.data.count
    options.value = res.data.results.filter(item => item.pid == null)
    console.log(options.value)
  })
}
const handleSizeChange=(size)=>{
  query.value.pagesize = size
  getrescourse()
}
const handleCurrentChange=(num)=>{
  query.value.page = num
  getrescourse()
}

// // 搜索
// const searchre=()=>{
  
// }




// 删除
let rolelist = ref([])
const getrolelist=()=>{
  http.get(`/app/role/`)
  .then(res=>{
    console.log(res)
    rolelist.value = res.data
  })
}
let flag=ref(false)
let del=ref(0)
const deleteres=(info)=>{
  flag.value = true
  del.value = info.id
  console.log(del.value)
}
const submit=()=>{
  http.delete(`/app/resource/${del.value}/`)
  .then(res=>{
    console.log(res)
    if (res.status==204){
      ElMessage.success("删除成功")
      flag.value = false
    }
  })
}

// 添加和编辑
const form = ref({
  id: null,
  name: '',
  url: '',
  pid: '',
})
const obj = ref({
  id: null,
  name: '',
  url: '',
  pid: '',
})
const resources = ref([])
const options = ref([])
const open = ref(false)
const flag_edit = ref(false)

const add = () => {
  form.value = {id: null, name: '', url: '', pid: ''}
  open.value = true
}

const handleClick = (row) => {
   flag_edit.value = true;
   obj.value = row;
  }
const submit1=()=>{
  http.post(`/app/resource/add_resource/`, {resource: form.value})
  .then(res=>{
    console.log(form.value)
    console.log(res.data)
    open.value=false
    ElMessage.success("添加成功")
    getrescourse()
  })
}
const submit_update=()=>{
   http.post(`/app/resource/${obj.value.id}/update_resource/`, {resource: obj.value})
        .then(res => {
          console.log(res.data)
          ElMessage.success("修改成功")
          flag_edit.value = false
          getrescourse()
        })
}
// const submit1 = () => {
//   if (isEdit.value) {
//     http.post(`/app/resource/update_resource/`, {resource: form.value})
//         .then(res => {
//           console.log(res.data)
//           fetchResources()
//         })
//   } else {
//     http.post(`/app/resource/add_resource/`, {resource: form.value})
//         .then(res => {
//           console.log(res.data)
//           fetchResources()
//         })
//   }
//   open.value = false
// }

onMounted(
  ()=>{
    getrescourse()
    getrolelist()
    //  fetchResources()
  }
)
</script>
<style scoped></style>